<template>
  <div class="events__list" ref="eventList">
    <list-head :columns="columns" :scroller="isScroller"/>
    <div class="list__body">
      <recycle-scroller
        ref="scroller"
        class="list__scroller"
        :items="list"
        :item-size="48"
        key-field="button_id"
        v-slot="{ item }">
        <list-item :item="item" @action="(v) => $emit('action', v)" />
      </recycle-scroller>
    </div>
  </div>
</template>

<script>
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { RecycleScroller } from 'vue-virtual-scroller'
import ListItem from './list-item.vue'
import ListHead from './list-head.vue'

export default {
  components: {
    RecycleScroller,
    ListHead,
    ListItem
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    nodes: { type: Array, default: () => [] }
  },
  data: () => ({
    isScroller: false
  }),
  computed: {
    columns () {
      return [
        { filed: 'button_name', name: '事件名称', width: '80%' },
        { filed: 'button_id', name: '事件ID', width: '10%' },
        { filed: '', name: '操作', width: '10%' }
      ]
    }
  },
  component: {
    // AgGridVue
  },
  methods: {
    detechScrollContainer () {
      const container = document.querySelector('.list__scroller')
      const observer = new MutationObserver(() => {
        this.isScroller = container.scrollHeight > container.clientHeight
      })
      observer.observe(container, { attributes: true, childList: true, subtree: true })
    }
  },
  mounted () {
    this.detechScrollContainer()
  }
}
</script>

<style lang="scss" scoped>
.events__list {
  flex: 1 1 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  --border-color: #DCDFE6;
  --grid-template-columns: 70% 10% 20%;
  .list__scroller {
    height: 100%;
    width: 100%;
    scrollbar-width: auto;
    overflow-x: hidden;
  }
  /deep/ .vue-recycle-scroller__item-wrapper {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }
}
.list__body {
  flex: 1 1 100%;
  overflow: hidden;
}
.head {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-right: 1px solid var(--border-color);
  .cell__row {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-right: 0;

    box-sizing: border-box;
  }
  div.cell__row:last-child {
    padding-right: 14px;
    box-sizing: content-box;
  }
}
</style>
